<template>
  <div>
    <div class="provider-list">
      <div class="content">
        <div class="project-info">
          <span>项目信息</span>
          <div class="form-box">
            <el-form
              style="max-width: 1200px"
              :model="productForm"
              :rules="rules"
              ref="formRef"
              label-position="top"
            >
              <el-form-item label="产品名称：" prop="chanpinmingcheng">
                <el-col :span="10">
                  <el-input
                    size="large"
                    maxlength="80"
                    v-model="productForm.chanpinmingcheng"
                  />
                </el-col>
              </el-form-item>
              <el-form-item label="产品类型" prop="chanpinleixing1">
                <el-select
                  v-model="productForm.chanpinleixing1"
                  size="large"
                  placeholder="一级"
                  @change="changeSelection1"
                  :loading="loading1"
                  style="width: 240px"
                >
                  <el-option
                    v-for="item in type1"
                    :key="item.dicValue"
                    :label="item.dicLabel"
                    :value="item.dicValue"
                  />
                </el-select>
                <el-select
                  v-model="productForm.chanpinleixing2"
                  size="large"
                  placeholder="二级"
                  @visible-change="GetType2"
                  @change="changeSelection2"
                  :loading="loading2"
                  style="width: 240px; margin-left: 10px"
                >
                  <el-option
                    v-for="item in type2"
                    :key="item.dicValue"
                    :label="item.dicLabel"
                    :value="item.dicValue"
                  />
                </el-select>
                <el-select
                  v-model="productForm.chanpinleixing3"
                  size="large"
                  placeholder="三级"
                  @visible-change="GetType3"
                  :loading="loading3"
                  style="width: 240px; margin-left: 10px"
                >
                  <el-option
                    v-for="item in type3"
                    :key="item.dicValue"
                    :label="item.dicLabel"
                    :value="item.dicValue"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="选择供应商" prop="gongyingshang">
                <el-select
                  :disabled="disabled"
                  v-model="productForm.gongyingshang"
                  size="large"
                  placeholder="选择"
                  style="width: 300px"
                >
                  <el-option
                    v-for="item in providerOptions"
                    :key="item.gysNo"
                    :label="item.gongsimingcheng"
                    :value="item.gysNo"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="规格名称" prop="chanpinmingcheng">
                <el-col :span="6">
                  <el-input size="large" v-model="guigemingcheng" />
                </el-col>
                <el-col :span="3">
                  <el-input-number
                    placeholder="价格"
                    class="ml10 money-icon"
                    :controls="false"
                    v-model="jiage"
                    size="large"
                  />
                </el-col>
                <el-button
                  style="min-width: auto; margin-left: 70px"
                  link
                  type="primary"
                  size="small"
                  @click="addFormat"
                  >增加规格</el-button
                >
              </el-form-item>
              <div
                v-for="(item, index) in productForm.chanpinguige"
                :key="index"
              >
                <el-form-item label="规格名称">
                  <el-col :span="6">
                    <el-input
                      disabled
                      size="large"
                      v-model="item.guigemingcheng"
                    />
                  </el-col>
                  <el-col :span="3">
                    <el-input-number
                      placeholder="价格"
                      class="ml10 money-icon"
                      disabled
                      :controls="false"
                      v-model="item.jiage"
                      size="large"
                    />
                  </el-col>
                  <el-button
                    style="min-width: auto; margin-left: 70px"
                    link
                    type="primary"
                    size="small"
                    @click="deleteFormat(index)"
                    >删除</el-button
                  >
                </el-form-item>
              </div>
              <el-form-item
                label="产品介绍（视频/图片-建议尺寸:750*560px）"
                prop="chanpinjieshao"
              >
                <bjz-oss
                  :previewList="productForm.chanpinjieshao"
                  :accept="['.jpg', '.png', '.jpeg', '.mp4']"
                  :allowMultiple="true"
                  :size="100"
                  @success="onSuccess"
                  @remove="removeUploadFile"
                />
              </el-form-item>
              <el-form-item label="备注：">
                <el-col :span="10">
                  <el-input
                    size="large"
                    type="textarea"
                    maxlength="500"
                    :rows="5"
                    v-model="productForm.beizhu"
                  />
                </el-col>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="product-info" style="width: 100%">
          <div class="flex-s" style="align-items: baseline">
            <span style="color: #000">产品详情：</span>
            <editor :initValue="productForm.chanpinxiangqing" @onVal="onVal" />
          </div>
          <div v-if="check === '1'">
            <p style="margin-top: 50px; color: #000">审核状态</p>
            <el-form-item style="margin-top: 10px">
              <el-radio-group v-model="productForm.shenhe">
                <el-radio :label="0">待审核</el-radio>
                <el-radio :label="1">审核通过</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div class="bottom flex-c mt20">
            <el-button
              style="margin-left: 100px"
              type="primary"
              @click="submitForm(formRef)"
              >提交信息</el-button
            >
            <el-button style="margin-left: 50px" @click="$router.go(-1)"
              >取消</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, toRefs, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { GetDictionary, GetDictionaryTree } from "@/api/system";
import { AddProduct, GetProduct, EditProduct } from "@/api/product";
import { GetProviderOptions } from "@/api/provider";
import { baseMsg } from "@/utils/utils";
export default defineComponent({
  setup() {
    const route = useRoute();
    const router = useRouter();
    const formRef = ref(null);
    const validateImg = (rule, value, callback) => {
      if (
        state.productForm.chanpinjieshao &&
        state.productForm.chanpinjieshao.length
      ) {
        callback();
      } else {
        callback(new Error("请上传产品介绍（视频/图片）"));
      }
    };
    const state = reactive({
      rules: {
        chanpinmingcheng: [
          { required: true, message: "请输入产品名称", trigger: "blur" },
        ],
        chanpinleixing1: [
          { required: true, message: "请选择产品类型", trigger: "change" },
        ],
        gongyingshang: [
          { required: true, message: "请选择供应商", trigger: "change" },
        ],
        chanpinjieshao: [
          { required: true, trigger: "blur", validator: validateImg },
        ],
      },
      productForm: {
        chanpinmingcheng: "",
        chanpinleixing1: "",
        chanpinleixing2: "",
        chanpinleixing3: "",
        gongyingshang: "",
        chanpinguige: [],
        chanpinjieshao: [],
        beizhu: "",
        chanpinxiangqing: "",
        shenhe: 0,
      },
      dicModel: "gongyingshangpinzhuanjialeixing",
      type1: [],
      type2: [],
      type3: [],
      // 规格名称
      guigemingcheng: "",
      // 规格价格
      jiage: null,
      loading1: true,
      loading2: true,
      loading3: true,
      providerOptions: [],
      // 是否从供应商详情页面过来的
      disabled: false,
      check: localStorage.getItem("check"),
    });
    // 一级分类查询
    const GetType1 = async () => {
      state.loading1 = true;
      const res = await GetDictionaryTree({ dicModel: state.dicModel });
      if (res.code == 4201) {
        state.type1 = res.data;
        state.loading1 = false;
      } else {
        state.loading1 = false;
      }
    };
    // 查询二级分类
    const GetType2 = (val) => {
      state.loading2 = true;
      state.type2 = [];
      if (state.productForm.chanpinleixing1) {
        GetDictionary({ dicId: state.productForm.chanpinleixing1 }).then(
          (res) => {
            if (res.code == 4201) {
              state.type2 = res.data;
            }
          }
        );
        state.loading2 = false;
      } else {
        state.loading2 = false;
      }
    };
    // 查询三级分类
    const GetType3 = (val) => {
      state.loading3 = true;
      state.type3 = [];
      if (state.productForm.chanpinleixing2) {
        GetDictionary({ dicId: state.productForm.chanpinleixing2 }).then(
          (res) => {
            if (res.code == 4201) {
              state.type3 = res.data;
            }
          }
        );
        state.loading3 = false;
      } else {
        state.loading3 = false;
      }
    };
    // 获取供应商下拉列表
    const GetProviders = () => {
      GetProviderOptions().then((res) => {
        if (res.code == 4201) {
          state.providerOptions = res.data;
        }
      });
    };
    // 产品id查询
    const QueryProduct = () => {
      if (route.query.type == "edit") {
        GetProduct({ id: route.query.id }).then((res) => {
          if (res.code == 4201) {
            state.productForm = res.data;
            GetType2();
            GetType3();
          }
        });
      }
      if (route.query.type == "addGoods") {
        state.disabled = true;
        state.productForm.gongyingshang = route.query.gysNo;
      } else {
        state.disabled = false;
      }
    };
    // 分类选中值改变
    const changeSelection1 = () => {
      state.type2 = [];
      state.type3 = [];
      state.productForm.chanpinleixing2 = "";
      state.productForm.chanpinleixing3 = "";
    };
    const changeSelection2 = () => {
      state.type3 = [];
      state.productForm.chanpinleixing3 = "";
    };
    // 图片上传成功
    const onSuccess = (res) => {
      state.productForm.chanpinjieshao.push(res);
    };
    // 上传文件删除
    const removeUploadFile = (index) => {
      state.productForm.chanpinjieshao.splice(index, 1);
    };
    // 增加规格
    const addFormat = () => {
      if (state.guigemingcheng && state.jiage) {
        state.productForm.chanpinguige.push({
          guigemingcheng: state.guigemingcheng,
          jiage: state.jiage,
        });
      }
    };
    // 删除规格
    const deleteFormat = (index) => {
      state.productForm.chanpinguige.splice(index, 1);
    };
    // 富文本编辑器
    const onVal = (val) => {
      state.productForm.chanpinxiangqing = val;
    };
    // 提交表单
    const submitForm = async (formEl) => {
      if (!formEl) return;
      await formEl.validate((valid, fields) => {
        if (valid) {
          if (route.query.type == "add" || route.query.type == "addGoods") {
            AddProduct(state.productForm).then((res) => {
              if (res.code == 4202) {
                baseMsg("新增产品成功");
                router.go(-1);
              }
            });
          }
          if (route.query.type == "edit") {
            EditProduct(state.productForm).then((res) => {
              if (res.code == 4202) {
                baseMsg("产品编辑成功");
                router.go(-1);
              }
            });
          }
        }
      });
    };
    GetType1();
    GetProviders();
    QueryProduct();
    return {
      ...toRefs(state),
      formRef,
      onSuccess,
      submitForm,
      deleteFormat,
      addFormat,
      onVal,
      removeUploadFile,
      GetType1,
      GetType2,
      GetType3,
      changeSelection1,
      changeSelection2,
      GetProviders,
      QueryProduct,
    };
  },
});
</script>
<style lang="scss" scoped>
.content {
  border: none !important;
}
.project-info {
  padding: 30px 100px;
  font-size: 20px;
  color: black;
  display: flex;
  .form-box {
    margin: 80px 0 0 140px;
    flex: 1;
  }
}
.product-info {
  padding: 40px;
}
.money-icon {
  position: relative;
  &::before {
    content: "￥";
    color: #000;
    font-size: 16px;
    top: 2px;
    left: 20px;
    position: absolute;
    z-index: 2;
  }
}
</style>
